<template>
  <div class="wrap bi-data-layer-left-box animate__animated animate__fadeInRight">
    <div class="top">
      <div class="content"> <img src="../../../assets/images/right_yb.png"
          style="width:80px;height:20px"><span>监控当前区域</span><img src="../../../assets/images/top_sd.png"
          style="height:25px;"></div>
    </div>
    <div class="toprighttitle">
      <span>湖面设备</span>
    </div>
    <div class="top">
      <div class="content"> <img src="../../../assets/images/right_yb.png"
          style="width:80px;height:20px"><span>设备概览</span><img src="../../../assets/images/top_sd.png"
          style="height:25px;"></div>
    </div>
    <div class="cont_nei">
      <el-row :gutter="20">
        <el-col :span="12">
          <div align="center" class="cont_t">投加设备</div>
          <div class="t_neir">
            <div align="center" class="t_text">{{ $parent.$parent.homeData.totalNumber || 0 }}<span
                style="font-size:calc(100vw * 20/ 1920);;margin-left: 3px;">台</span></div>
            <div class="t_lef">运行<br><span>{{ $parent.$parent.homeData.runningNumber || 0 }}台</span></div>
            <div class="t_rig">停运<br><span>{{ $parent.$parent.homeData.offlineNumber || 0 }}台</span></div>
          </div>
        </el-col>
        <el-col :span="12">
          <div align="center" class="cont_t" style="color:#1A86FF">曝气设备</div>
          <div class="t_neir r_neir">
            <div align="center" class="t_text">{{ $parent.$parent.homeData.totalNumberOne || 0 }}<span
                style="font-size:calc(100vw * 20/ 1920);;margin-left: 3px;">台</span></div>
            <div class="t_lef">运行<br><span>{{ $parent.$parent.homeData.runningNumberOne || 0 }}台</span></div>
            <div class="t_rig">停运<br><span>{{ $parent.$parent.homeData.offlineNumberOne || 0 }}台</span></div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="top">
      <div class="content"> <img src="../../../assets/images/right_yb.png"
          style="width:80px;height:20px"><span>设备列表</span><img src="../../../assets/images/top_sd.png"
          style="height:25px;">
      </div>
    </div>
    <div class="b_hezi">
      <div class="r_bootom" v-for="(v, i) in List" :key="i">
        <div :class="v.offlineNumber > 0 ? 'r_tit r_tit_er' : 'r_tit'"><span>{{ v.boxName || '-' }}</span></div>
        <div :class="v.offlineNumber > 0 ? 'r_neione_er r_neione' : 'r_neione'">
          <span>控制设备：</span>
          <div :class="v.showqie ? 'r_oneemttwo' : 'r_oneemt'">{{ v.deviceNames && v.deviceNames.join(' | ') }}</div>
          <img :src="require(`../../../assets/images/${v.offlineNumber > 0 ? 'u31' : 'u11'}.png`)"
            :class="v.showqie ? 'r_show r_show_sa' : 'r_show r_show_hui'" @click="() => v.showqie = !v.showqie"
            width="14px">
          <el-row :gutter="10" style="pointer-events:none">
            <el-col :span="8">
              <ul class="g_ul">
                <li><span>设备总数:</span> <span class="zi">{{ v.totalNumber || 0 }}</span> <span class="t_tai">台</span>
                </li>
                <li><span>运行设备:</span> <span class="zi">{{ v.runningNumber || 0 }}</span> <span class="t_tai">台</span>
                </li>
                <li><span>停运设备:</span> <span class="zi">{{ v.offlineNumber || 0 }}</span> <span class="t_tai">台</span>
                </li>
              </ul>
            </el-col>
            <el-col :span="16">
              <div class="r_man">
                <ul class="r_ulli">
                  <li><span>今日运行:</span> <span>{{ v.runningHour || 0 }}</span> <span>台</span></li>
                  <li><span>今日电量:</span> <span>{{ v.powerConsumption || '0.00' }}</span> <span>度</span></li>
                </ul>
              </div>
            </el-col>
          </el-row>
        </div>
        <div :class="v.offlineNumber > 0 ? 'r_btm r_btm_er' : 'r_btm'"></div>
      </div>
    </div>


    <!-- <div class="down out-box">
      <div class="title">
        <svg-icon icon-class="devices" /> DO监测仪数据
      </div>
      <div class="content">
        <div class="card_content">
          <el-row v-for="(v, i) in $parent.$parent.monitorDeviceDataList" :key="i" type="flex" justify="space-around"
            class="hangnei">
            <template v-if="i < 3">
              <el-col :span="8" align="center">
                <span>{{ v.monitorName }}:</span>
              </el-col>
              <el-col :span="8" align="center">
                <div :class="['hezi', 'hezi_red', 'hezi_red'][v.status]">{{ v.data }}</div>
              </el-col>
              <el-col :span="8" align="center">
                <span>{{ v.unit || 'mg/L' }}</span>
              </el-col>
            </template>
          </el-row>
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import 'animate.css'


export default {
  name: 'RightBox',
  data () {
    return {
      searchValue: '',
      showqie: false,
      List: [],
      table_interval: null
    }
  },
  computed: {
  },
  mounted () {
    this.dataScrolling()
    let dom = document.querySelector(".b_hezi");
    dom.addEventListener('mouseover', this.mouseEnter, false)
    dom.addEventListener('mouseout', this.mouseLeave, false)
    this.getinit()

  },
  destroyed () {
    clearInterval(this.table_interval);

  },
  methods: {
    getinit () {
      this.List = this.$parent.$parent.electricityBox.map((item) => {
        return {
          ...item,
          showqie: false
        }
      })
    },
    /**表格数据滚动 */
    dataScrolling () {
      let dom = document.querySelector(".b_hezi");
      this.table_interval = setInterval(() => {
        // 元素自增距离顶部1像素
        dom.scrollTop += 1;
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (dom.clientHeight + dom.scrollTop == dom.scrollHeight) {
          // 重置table距离顶部距离
          dom.scrollTop = 0;
        }
      }, 100); // 滚动速度
    },
    /**鼠标进入，停止滚动 */
    mouseEnter () {
      clearInterval(this.table_interval);
      this.table_interval = null
    },
    /**鼠标离开，开始滚动 */
    mouseLeave () {
      this.dataScrolling();
    },
  }
}
</script>

<style lang="scss">
.bi-data-layer-left-box {
  .pagination {
    text-align: center;
  }

  .el-pagination {
    color: #ccc;
  }

  .el-pager {
    li {
      background: none !important;
      /*color: white !important;*/
    }
  }

  .btn-prev,
  .btn-next {
    background: none !important;
    color: #ccc !important;
  }

  .btn-quicknext {
    color: #ccc !important;
  }
}
</style>
<style lang="scss" scoped>
.wrap {
  position: fixed;
  top: 10vh;
  right: 2%;
  width: 400px;

  /*background-color: rgb(0,0,0, 0.5);*/
  .title {
    font-size: calc(100vw * 20/ 1920);
    padding: 10px;
    background-color: rgb(200, 200, 200, 0.3);
  }

  .top {
    background: url('../../../assets/images/righttl.png') no-repeat;
    background-size: contain;
    display: flex;
    // justify-content: center;
    padding-right: 10px;
    align-items: center;
    height: 40px;
    flex-direction: row-reverse;

    .content {
      display: flex;
      align-items: center;
      // padding: 15px;
      // background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
      background-image: linear-gradient(to top, #00E2F6, #FFFFFF);
      -webkit-background-clip: text;
      font-weight: bold;
      color: transparent;
      text-align: center;
      font-size: calc(100vw * 20/ 1920);

      span {
        margin: 0px 20px;
      }
    }
  }

  .toprighttitle {
    margin: 10px 0px;
    background: url('../../../assets/images/toptitle.png') no-repeat;
    background-size: contain;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80px;
    width: 100%;

    span {
      background-image: linear-gradient(to top, #FFFFFF, #00E2F6);
      -webkit-background-clip: text;
      font-weight: 400;
      color: transparent;
      font-size: calc(100vw * 34.58/ 1920);
      // text-shadow: 0px 2px 0px #000000;
    }
  }

  .cont_nei {
    padding: 10px;
    margin: 10px 0 0 0;
    background: url('../../../assets/images/contrbg.png') -473px -38px no-repeat;
    background-size: initial;
    height: 20vh;
    width: 100%;

    .cont_t {
      color: #8D65FF;
      font-size: calc(100vw * 22/ 1920);
      font-weight: bold;
    }

    .r_neir {
      background: url('../../../assets/images/u9.png') round !important;
      background-size: cover !important;
    }

    .t_neir {
      background: url('../../../assets/images/u8.png') round;
      background-size: cover;
      width: 95%;
      height: 18vh;
      margin: 0 auto;
      padding: 10px;

      .t_rig {
        float: right;
        font-size: calc(100vw * 21/ 1920);
        font-weight: bold;
        color: #FF9300;
        margin: 20px 10px 0 0px;
        transform: skew(0deg, -8deg);

        span {
          color: #FFFFFF;
          text-shadow: 0px 1px 4px #FF9300;
          margin-left: 4px;
        }
      }

      .t_lef {
        float: left;
        font-size: calc(100vw * 21/ 1920);
        font-weight: bold;
        color: #00FF78;
        margin: 20px 0px 0 7px;
        transform: skew(0deg, 8deg);

        span {
          color: #FFFFFF;
          text-shadow: 0px 1px 4px #00FF78;
          margin-left: 4px;
        }
      }

      .t_text {
        font-size: calc(100vw * 49/ 1920);
        font-weight: bold;
        color: #FFFFFF;
        text-shadow: 0px 2px 0px #000000;
      }
    }
  }

  .b_hezi {
    height: 39vh;
    overflow: auto;
    margin: 10px 0px;
  }

  .b_hezi::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 5px;
    height: 5px;
    /*高宽分别对应横竖滚动条的尺寸*/
  }

  .b_hezi::-webkit-scrollbar-track {
    background: rgba($color: #fff, $alpha: 0.1);
  }

  .b_hezi::-webkit-scrollbar-thumb {
    background: rgba($color: #18fbf2, $alpha: 0.3);
    border-radius: 25px;
  }

  .r_bootom {
    margin: 10px 0px 10px 0px;
    // background: url('../../../assets/images/u10.png') round;
    // background-size: cover;
    width: 100%;
    // height: 15vh;
    clear: both;

    @mixin urlti($urls, $true) {
      background: url("../../../assets/images/y" +$urls+".png") round $true;
      background-size: cover $true;
    }

    .r_tit_er {
      @include urlti(4, !important);

      >span {
        background: linear-gradient(0deg, #FF722C 0%, #FBD318 84.9365234375%) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
      }
    }

    .r_btm_er {
      @include urlti(6, !important);
    }

    .r_neione_er {
      @include urlti(5, !important);

      span:nth-child(1) {
        color: #fff !important;
      }

      .r_oneemt {
        color: #FFAE00 !important;
      }

      .r_oneemttwo {
        color: #FFAE00 !important;
      }

      .g_ul>li {
        background: url('../../../assets/images/u14.png')30px 0px no-repeat !important;
        background-size: contain !important;

        .zi {
          color: #FFAE00 !important;
        }
      }

      .r_man {
        background: url('../../../assets/images/u25.png') round !important;
        background-size: cover !important;
      }

      .r_ulli>li {
        span:nth-child(2) {
          color: #FFAE00 !important;
        }
      }

    }

    .r_tit {
      @include urlti(1, null);
      height: 35px;
      line-height: 35px;
      padding-left: 10px;

      >span {
        font-size: calc(100vw * 18/ 1920);
        font-weight: bold;
        color: #FFFFFF;
        background: linear-gradient(0deg, #2CFF99 0%, #18FBF2 84.9365234375%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }

    .r_btm {
      @include urlti(3, null);
      height: 18px;
    }

    .r_neione {
      padding: 5px 10px 0px;
      width: 100%;
      @include urlti(2, null);

      span:nth-child(1) {
        font-size: calc(100vw * 14/ 1920);
        font-weight: 400;
        color: #59B9C5;
        float: left;
      }

      .r_show {
        cursor: pointer;
        float: right;
        margin-top: 5px;
      }

      .r_show_sa {
        transform: rotate(-180deg);
        transition: transform 0.5s ease;
      }

      .r_show_hui {
        transform: rotate(-360deg);
        transition: transform 0.5s ease;
      }

      .r_oneemt {
        width: 75%;
        font-size: calc(100vw * 16/ 1920);
        font-weight: 400;
        color: #00F4FF;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        word-break: break-all; //数字和文字/字母不分行
        float: left;
      }

      .r_oneemttwo {
        width: 75%;
        font-size: calc(100vw * 16/ 1920);
        font-weight: 400;
        color: #00F4FF;
        display: inline-block;
      }

      .g_ul {
        list-style-type: none;
        padding: 0px;
        font-size: calc(100vw * 14/ 1920);
        font-weight: 400;
        color: #59B9C5;

        li {
          padding: 0px;
          line-height: 20px;
          margin: 5px 0px 10px 0;

          .t_tai {
            font-size: calc(100vw * 13/ 1920);
            color: #fff;
          }
        }

        li:nth-child(1) {
          background: url('../../../assets/images/u13.png')30px 0px no-repeat;
          background-size: contain;

          .zi {
            color: #00F0FF;
            font-size: calc(100vw * 20/ 1920);
          }
        }

        li:nth-child(2) {
          background: url('../../../assets/images/u12.png')30px 0px no-repeat;
          background-size: contain;

          .zi {
            color: #00FF78;
            font-size: calc(100vw * 20/ 1920);
          }
        }

        li:nth-child(3) {
          background: url('../../../assets/images/u14.png')30px 0px no-repeat;
          background-size: contain;

          .zi {
            color: #FF9300;
            font-size: calc(100vw * 20/ 1920);
          }
        }
      }

      .r_man {
        margin: 21px -7px 0px 10px;
        background: url('../../../assets/images/u15.png') round;
        background-size: cover;
        height: 75px;
        padding: 10px 0px 10px 32%;

        .r_ulli {
          list-style-type: none;
          padding: 0;
          margin: 0;

          li {
            margin: 0px 0px 5px 0px;
            font-size: calc(100vw * 18/ 1920);
            font-weight: 400;
            line-height: 25px;
            color: #59B9C5;

            span:nth-child(2) {
              color: #00F0FF;
              font-size: calc(100vw * 27/ 1920);
            }

            span:nth-child(3) {
              color: #fff;
              font-size: calc(100vw * 16/ 1920);
            }
          }
        }
      }
    }
  }


}
</style>
